<template>
	<view class="sms">
		<view class="tips">
			<text>更换原有手机号码</text>
			<text>可通过新的手机号码找回密码、验证身份</text>
		</view>
		<!-- <view class="phone">
			<view class="phone-box">
				<text>手机号码</text>
				<input type="text" value="" placeholder="123456"/>
			</view>
			<text class="code">获取验证码</text>
		</view> -->
		<view class="verification-code">
				<text>手机号码</text>
				<input type="text" value="" placeholder="123456"/>
		</view>
		<view class="phone">
			<view class="phone-box">
				<text>验证码</text>
				<input type="text" value="" placeholder="请输入验证码"/>
			</view>
			<text class="code">获取验证码</text>
		</view>
		<view class="send-box">
			<text>重新发送（12s）</text>
			<text>重新发送</text>
		</view>
		<view class="submit" @click="submit">
			更换手机号码
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			submit(){
				uni.navigateTo({
					url:'./newPhone'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.submit{
		margin: 60rpx 5%;
		width: 90%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: 36rpx;
		background: #FF7200;
		opacity: 1;
		border-radius: 10rpx;
	}
	.send-box{
		padding-left: 40rpx;
		text:first-child{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			margin-right: 10rpx;
		}
		text:last-child{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1297F1;
		}
	}
	.verification-code{
		padding: 10rpx 40rpx;
		width: 100%;
		height: 70rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 0px;
		margin-top: 20rpx;
		margin-bottom: 32rpx;
		display: flex;
		text{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-right: 28rpx;
		}
	}
	/deep/.input-placeholder{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999 !important;
	}
	.phone{
		margin-top: 60rpx;
		width: 100%;
		height: 70rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 40rpx;
		.code{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #1297F1;
		}
		.phone-box{
			display: flex;
			text{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-right: 28rpx;
			}
		}
	}
.tips{
	width: 100%;
	height: 212rpx;
	background: #FFFFFF;
	opacity: 1;
	display: flex;
	flex-direction: column;
	padding: 0 40rpx;
	text:first-child{
		margin: 40rpx 0 20rpx;
		font-size: 60rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}
	text:last-child{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}
}
</style>
